<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fizzed-音乐盒</title>

    <link href="../static/images/favicon.ico" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="../static/lib/music/css/zplayer.min.css" th:href="@{/lib/music/css/zplayer.min.css}" />
    <script type="text/javascript" src="../static/lib/music/js/zplayer.min.js" th:src="@{/lib/music/js/zplayer.min.js}"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>


    <link type="text/css" href="css/style.css" rel="stylesheet" />
<!--    <script type="text/javascript" src="js/script.js"></script>-->


</head>
<body>

<!--导航-->
<nav class="gird-header">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui olive header item" style="font-family: STSong">Fizzed</h2>
            <!--<div class="right m-item item m-mobile-hide">-->
                <a href="#" target="_blank" th:href="@{/}" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
                <a href="#" target="_blank" th:href="@{/types/-1}" class="m-item item m-mobile-hide"><i class="clone outline icon"></i>分类</a>
                <a href="#" target="_blank" th:href="@{/archives}" class="m-item item m-mobile-hide"><i class="clock icon"></i>时间轴</a>
                <a href="#" th:href="@{/music}" class="active m-item item m-mobile-hide"><i class="music icon"></i>音乐盒</a>
                <a href="#" target="_blank" th:href="@{/message}" class="m-item item m-mobile-hide"><i class="book icon"></i>留言板</a>
                <a href="#" target="_blank" th:href="@{/friends}" class="m-item item m-mobile-hide"><i class="pencil alternate icon"></i>友人帐</a>
                <a href="#" target="_blank" th:href="@{/picture}" class="m-item item m-mobile-hide"><i class="image icon"></i>照片墙</a>
                <a href="#" target="_blank" th:href="@{/about}" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
            <!--</div>-->
            <div class="right m-item item m-mobile-hide">
                <form name="search" action="#" th:action="@{/search}" method="post" target="_blank">
                    <div class="ui icon transparent input m-margin-tb-tiny" style="color: white">
                        <input style="color: white" type="text" name="query" placeholder="Search...." th:value="${query}">
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--顶部图片-->
<div class="m-bg-type_outer" style="width: 100%;height: 40%">
    <img src="../static/images/music.jpg" th:src="@{/images/music.jpg}" alt="" class="ui m-bg image" style="width: 100%;height: 100%">
    <div class="m-bg-class_cover">
        <div class="ui container" style="position: relative ;bottom: -540px;">
            <div class="m-font-size-title m-right-bottom" align="center" style="font-family:'STXingkai'">音乐盒</div>
            <div class="m-font-size-text-init-title m-margin-top" align="center">是啊，我也喜欢温柔，温暖，以及寻找着相互吸引的东西。努力活下去的心，很喜欢</div>
        </div>
    </div>
</div>

<!--<div class="ui m-margin- m-opacity" align="center">-->
<!--    <div class="ui container box-shadow-max">-->
<!--        <div id="player2"></div>-->
<!--    </div>-->
<!--</div>-->
<div class="btns-bg">
    <div class="PlayEy"></div>
    <div class="Btn"></div>
    <div class="Play">
        <audio id="audios" src="http://music.163.com/song/media/outer/url?id=504924216.mp3"></audio>
    </div>
</div>
<script>
    var zp2 = new zplayer({
        element: document.getElementById("player2"),
        lrcStart: 0,/*是否开启歌词功能 ，默认false（为true时musics集合中需要传入lrc字段。）*/
        musics: [{
            title: "南方姑娘",
            author: "赵雷",
            url: "https://music.163.com/song/media/outer/url?id=202373.mp3",
            pic: "http://p1.music.126.net/wldFtES1Cjnbqr5bjlqQbg==/18876415625841069.jpg?param=130y130",
        },{
            title: "理想",
            author: "赵雷",
            url: "https://music.163.com/song/media/outer/url?id=29567189.mp3",
            pic: "http://p1.music.126.net/PJNV84mjt_mDXEkxtjzB4w==/18957779486268444.jpg?param=130y130",
        },{
            title: "阿刁",
            author: "赵雷",
            url: "https://music.163.com/song/media/outer/url?id=447925059.mp3",
            pic: "http://p1.music.126.net/BJgUd9aD9gpougZFASRTTw==/18548761162235571.jpg?param=130y130",
        },{
            title: "三十岁的女人",
            author: "赵雷",
            url: "https://music.163.com/song/media/outer/url?id=29567191.mp3",
            pic: "http://p1.music.126.net/PJNV84mjt_mDXEkxtjzB4w==/18957779486268444.jpg?param=130y130",
        }]
    })
    // zp2.init();

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    var i = 0;
    var oPlayEy = document.getElementsByClassName("PlayEy")[0];
    var oPlay = document.getElementsByClassName("Play")[0];
    var audios = document.getElementById('audios');
    oPlay.onclick = function() {
        var seii = setInterval(function() {
            (i == 360) ? i = 0 : i++;
            oPlayEy.style.transform = "rotate(" + i + "deg)";
            if(audios.paused) {
                clearInterval(seii)
            }
        }, 30);
        if(audios.paused) {
            audios.play();
            oPlay.style.backgroundImage = "url(img/play.png)";
            oPlay.style.width = 32 + "px";
            oPlay.style.height = 32 + "px";
        } else {
            audios.pause();
            oPlay.style.backgroundImage = "url(img/pause.png)";
            oPlay.style.width = 29 + "px";
            oPlay.style.height = 36 + "px";
        }
    }
    // 浏览器搞笑标题
    var OriginTitle = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
            $('[rel="icon"]').attr('href', "/funny.ico");
            document.title = '(╯°Д°)╯︵ ┻━┻页面崩溃啦 ~';
            clearTimeout(titleTime);
        } else {
            $('[rel="icon"]').attr('href', "/favicon.ico");
            document.title = '┬─┬ ノ( \' - \'ノ) 噫又好啦 ~' + OriginTitle;
            titleTime = setTimeout(function () {
                document.title = OriginTitle;
            }, 2000);
        }
    });
</script>
<!--适配移动端和电脑端-->
<script type="text/javascript">
    var browser = {
        versions: function () {
            var u = navigator.userAgent, app = navigator.appVersion;
            return {     //移动终端浏览器版本信息
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1 //是否web应用程序，没有头部与底部
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    }
    if (browser.versions.mobile) {
        //执行移动端的相关代码
        //alert("移动端");
        //设置移动端不显示网易云音乐插件
        /*      onload = function () {
                  var MusicDivShow = document.getElementById('netEasy-music');//获取指定div中的元素
                  MusicDivShow.style.display = 'none';//控制层隐藏
              };*/
    } else if (!browser.versions.mobile) { //非移动端，动态加载js和div
        //设置电脑端显示网易云音乐插件
        // onload = function () {
        //     var MusicDivShow = document.getElementById('netEasy-music');//获取指定div中的元素
        //     MusicDivShow.style.display = 'block';//控制层显示
        // };
        // var script1 = document.createElement('script');
        // script1.type = 'text/javascript';
        // script1.src = '\\js\\snow.js';

        // <!-- 天气预报 -->
        // WIDGET = {FID: 'EtgqPWMbdv'}
        // var script4 = document.createElement('script');
        // script4.type = 'text/javascript';
        // script4.src = 'https://apip.weatherdt.com/float/static/js/r.js?v=1111';

        var script2 = document.createElement('script');
        script2.type = 'text/javascript';
        // script2.src = 'https://cdn.jsdelivr.net/gh/yremp/yremp-js@1.5/sakura.js';
        script2.src = 'https://yremp.live/wp-content/uploads/resource/js/sakura.js';

        //画图
        // var script3 = document.createElement('script');
        // script3.type = 'text/javascript';
        // script3.color = '220,220,220';
        // script3.opacity = '0.7';//透明度
        // script3.zIndex = '-2';
        // script3.count = '200';
        // script3.src = '//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js';

        // $('body').append(script1);
        // $('body').append(script4);天气预报
        $('body').append(script2);
        // $('body').append(script3);划线背景
    }
</script>
<script type="text/javascript" src="/lib/js/click_show_text.js"></script>

</body>
</html>
